<template>
  <div>
    <ul class="tabs">
      <li
        v-for="(tab, index) in tabList"
        :key="index"
        class="tab"
        :class="{ active: tab.active }"
        @click="changeTab(tab.url)"
      >
        <div class="txt">{{ tab.title }}</div>
        <div class="line"></div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  data: function() {
    return {
      tabList: [
        {
          title: '个人书架',
          active: true,
		      url:`myBooks`
        },
        {
          title: '男生频道',
          active: false,
		      url:`male`
        },
        {
          title: '女生频道',
          url: 'female',
          active: false
        },
        {
          title: '热门频道',
          url:'rank',
          active: false
        },
		        {
          title: '问题反映',
          url:'feedback',
          active: false
        }
      ]
    };
  },
  watch: {
    $route(to, from) {
	  this.upTab();
      console.log(to, from);
    }
  },
  methods: {
    changeTab(url) {
      this.$router.push(url);
    },
	upTab(){
		this.tabList.map(menu => {
        menu.active = menu.url === this.$route.name||this.$route.name===menu.url;
      })
	}
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tabs {
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
  line-height: 25px;
  padding: 0 2px;
  background: #16181d;
  .tab {
    color: rgba(#fff, 0.4);
    position: relative;
    &.active {
      color: #fff;
      .txt {
        position: relative;
        z-index: 2;
      }
      .line {
        position: absolute;
        bottom: 3px;
        left: 50%;
        width: 1.45rem;
        height: 0.3rem;
        margin-left: -0.75rem;
        background: #e68344;
        border-radius: 0.15rem;
        z-index: 0;
      }
    }
  }
}
</style>
